<template>
  <div class="signin pt-5">
    <button @click="back" class="ms-0">返回</button>
      <h2>注册</h2>
      <ul>
          <li class="row">
              <span class="col-3">用户名</span><input class="col-5" type="text" v-model="username" @blur="checkusername"><h7 class="col-3">{{error.username}}</h7>
          </li>
          <li class="row">
              <span class="col-3">密码</span><input class="col-5" type="password" v-model="password" @blur="checkpassword"><h7 class="col-3">{{error.password}}</h7>
          </li>
          <li class="row">
              <span class="col-3">确认密码</span><input class="col-5" type="password" v-model="pwd" @blur="checkpwd"><h7 class="col-3">{{error.pwd}}</h7>
          </li>
          <li class="row">
              <span class="col-3">手机号</span><input class="col-5" type="tel" v-model="tel" @blur="checktel"><h7 class="col-3">{{error.tel}}</h7>
          </li>
          <li class="row">
              <span class="col-3">邮箱</span><input class="col-5" type="email" v-model="email" @blur="checkemail"><h7 class="col-3">{{error.email}}</h7>
          </li>
          <li class="row">
              <span class="col-3">收件地址</span><input class="col-5" type="text" v-model="address" @blur="checkaddress"><h7 class="col-3">{{error.address}}</h7>
          </li> 
      </ul>
      <button @click="signin">注册</button>
      
  </div>
</template>


<script>

// 199000907冯祺
export default {
    data(){
        return {
            username: '',
            password: '',
            pwd:"",
            tel:'',
            email:'',
            address:"",
            error:{}
        }
        
    },
    methods: {
        checkusername(){ // 姓名
            if(this.username===""||this.username==null){
                this.error.username = "请填写用户姓名";
            }else{
                this.error.username=""
            }
        },
        checkaddress(){ // 地址
            if(this.address===""||this.address==null){
                this.error.address = "请填写收件地址";
            }else{
                this.error.address=""
            }
        },
        checkpassword(){ // 密码
            if(this.password===""||this.password==null){
                this.error.password = "请填写密码";
            }else if(this.password.length<3||this.password.length>10){ // 判断密码长度是否符合条件
                this.error.password="请输入3~10位密码"
            }else{
                this.error.password=""
            }
        },
        checkpwd(){ // 确认密码
            if(this.password===""||this.password==null){
                this.error.password = "请填写密码"; // 逻辑上，应该先进行密码填写，然后才填写确认密码，做相应提示
            }else if(this.pwd===""||this.pwd==null){
                this.error.pwd = "密码不能为空";
            }else if(this.pwd !==this.password){ // 确认密码与密码是否一致
                this.error.pwd="请保持密码一致"
            }else{
                this.error.pwd=""
            }
        },
        checktel(){ // 手机号
            const myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; 
            if(this.tel===""||this.tel==null){
                this.error.tel="手机号不能为空";
            }else if(!myreg.test(this.tel)){ // 运用正则表达式进行合法判断
                this.error.tel="手机号码不合法";
            }else{
                this.error.tel=""
            }
        },
        checkemail(){ // 手机号
            const reg =/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(this.email===""||this.email==null){
                this.error.email="邮箱不能为空";
            }else if(!reg.test(this.email)){ // 运用正则表达式进行合法判断
                this.error.email="邮箱不合法";
            }else{
                this.error.email=""
            }
        },

        signin(){
            if(this.error.email===""&&this.error.tel===""&&this.error.pwd===""&&this.error.password===""&&this.error.username===""){
                this.$store.state.userInfo.username=this.username
                this.$store.state.userInfo.password=this.password
                this.$store.state.userInfo.isLogin=true
                window.sessionStorage.setItem('userInfo',{ username: this.username, password: this.password, isLogin: true })
                // 跳转
                this.$router.push({
                    path: '/'
                })
            }else{
                alert('请根据提示修改注册信息')
            }
            
        },
        back(){
        this.$router.go(-1)
        }

    }
}
</script>
<style scoped>
.signin .ms-0{
    width: 50px;
    height: 30px;
    line-height: 15px;
    border: 1px solid gray;
}
    .signin h2{
        text-align: center;
    }
    .signin{
        width: 800px;
        height: 500px;
        background-image: url(./../assets/bg.jpg);
        margin: 0 auto;
       
    }
    .signin ul{
        margin: 0 auto;
    }
    .signin li{
        list-style: none;
        margin: 10px;
        line-height: 40px;
    }
    .signin span{
         text-align: right;
    }
    .signin button{
        width: 100px;
        height: 40px;
        padding: 5px;
        margin-left: 350px;
        border-radius: 5px;
        background-color: white;
        border: 2px solid #93d2f3;
    }
    .signin button:hover{
        background-color: #93d2f3;
        color: white;
    }

</style>
